<template>
	<div ref="container" @dblclick="fullscreenSwich"
		style="width:100%;height:518px; min-height: 200px;background-color: #000000;margin:0 auto;position: relative;">
		<div class="buttons-box" id="buttonsBox">
			<div class="buttons-box-left">
				<!-- <i v-if="!playing" class=" icon-play jessibuca-btn" @click="playBtnClick"></i> -->
				<!-- <i v-if="playing" class=" icon-pause jessibuca-btn" @click="pause"></i> -->
				<!-- <i class=" icon-stop jessibuca-btn" @click="destroy"></i> -->
				<u-icon v-if="!isNotMute" name="volume-off-fill" color="#fff" siez="28" @click="cancelMute()"></u-icon>
				<u-icon v-else name="volume-up-fill" color="#fff" siez="28" @click="mute()"></u-icon>
			</div>
			<div class="flex buttons-box-right">
				<span class="jessibuca-btn">{{ kBps }} kb/s</span>
				<!--          <i class=" icon-file-record1 jessibuca-btn"></i>-->
				<!--          <i class=" icon-xiangqing2 jessibuca-btn" ></i>-->
				<u-icon name="moments" color="#fff" class="screenhot" siez="32" @click="screenshot"></u-icon>
				<!-- <i class=" icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> -->
				<!-- <i v-if="!fullscreen" class=" icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
        <i v-if="fullscreen" class=" icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> -->
				<u-image width="28rpx" class="ml-12" v-if="fullscreen" height="28rpx" mode="aspectFit"
					src="@/static/img07.png" @click="fullscreenSwich"></u-image>
				<u-image width="28rpx" class="ml-12" v-else height="28rpx" mode="aspectFit" src="@/static/img08.png"
					@click="fullscreenSwich"></u-image>
			</div>
		</div>
	</div>
</template>

<script>
	let jessibucaPlayer = {};
	export default {
		name: 'jessibuca',
		data() {
			return {
				playing: false,
				isNotMute: false,
				quieting: false,
				fullscreen: false,
				loaded: false, // mute
				speed: 0,
				performance: "", // 工作情况
				kBps: 0,
				btnDom: null,
				videoInfo: null,
				volume: 1,
				rotate: 0,
				vod: false, // 点播
				forceNoOffscreen: false,
				defaultH: 9,
				defaultW: 16,
			};
		},
		props: ['videoUrl', 'error', 'hasAudio', 'height'],
		created() {
			
			let paramUrl = decodeURIComponent(this.$route.params.url)
			this.$nextTick(() => {
				this.updatePlayerDomSize()
				window.onresize = () => {
					this.updatePlayerDomSize()
				}
				if (typeof(this.videoUrl) == "undefined") {
					this.videoUrl = paramUrl;
				}
				this.btnDom = document.getElementById("buttonsBox");
			})
		},
		watch: {
			videoUrl: {
				handler(val, _) {
					this.$nextTick(() => {
						this.play(val);
					})
				},
				immediate: true
			}
		},
		methods: {
			updatePlayerDomSize() {
				let dom = this.$refs.container;
				let width = dom.parentNode.clientWidth
				let height = (this.defaultH / this.defaultW) * width

				const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
				if (height > clientHeight) {
					height = clientHeight
					width = (this.defaultW / this.defaultH) * height
				}
				console.log(width, height)
				if (width > 0 && height > 0) {
					dom.style.width = width + 'px';
					dom.style.height = height + "px";
				}
			},
			create() {
				let options = {
					container: this.$refs.container,
					autoWasm: true,
					background: "",
					controlAutoHide: false,
					debug: false,
					// decoder: "http://211.22.123.64:18080/static/js/jessibuca/decoder.js",
					decoder: "http://www.okr88.com/test/jessibuca/decoder.js",
					forceNoOffscreen: false,
					hasAudio: true,
					heartTimeout: 5,
					heartTimeoutReplay: true,
					heartTimeoutReplayTimes: 3,
					hiddenAutoPause: false,
					hotKey: true,
					isFlv: false,
					isFullResize: false,
					isNotMute: this.isNotMute,
					isResize: true,
					keepScreenOn: true,
					loadingText: "請稍等，視頻加載中......",
					loadingTimeout: 10,
					loadingTimeoutReplay: true,
					loadingTimeoutReplayTimes: 3,
					openWebglAlignment: false,
					operateBtns: {
						fullscreen: false,
						screenshot: false,
						play: false,
						audio: false,
						record: false
					},
					recordType: "mp4",
					rotate: 0,
					showBandwidth: false,
					supportDblclickFullscreen: false,
					timeout: 10,
					useMSE: true,
					useWCS: location.hostname === "localhost" || location.protocol === "https:",
					useWebFullScreen: true,
					videoBuffer: 0.1,
					wasmDecodeErrorReplay: true,
					wcsUseVideoRender: true
				};
				// console.log("Jessibuca -> options: ", options);
				jessibucaPlayer[this._uid] = new window.Jessibuca({
					...options
				});

				let jessibuca = jessibucaPlayer[this._uid];
				let _this = this;
				jessibuca.on("pause", function() {
					_this.playing = false;
				});
				jessibuca.on("play", function() {
					_this.playing = true;
				});
				jessibuca.on("fullscreen", function(msg) {
					_this.fullscreen = msg
				});
				jessibuca.on("mute", function(msg) {
					// console.log('mute', msg)
					_this.isNotMute = !msg;
				});
				jessibuca.on("performance", function(performance) {
					let show = "卡顿";
					if (performance === 2) {
						show = "非常流畅";
					} else if (performance === 1) {
						show = "流畅";
					}
					_this.performance = show;
				});
				jessibuca.on('kBps', function(kBps) {
					_this.kBps = Math.round(kBps);
					// console.log('jessibuca',jessibuca)
					
				});
				jessibuca.on("videoInfo", function(msg) {
					// console.log("Jessibuca -> videoInfo: ", msg);
				});
				jessibuca.on("audioInfo", function(msg) {
					// console.log("Jessibuca -> audioInfo: ", msg);
				});
				jessibuca.on("error", function(msg) {
					// console.log("Jessibuca -> error: ", msg);
				});
				jessibuca.on("timeout", function(msg) {
					// console.log("Jessibuca -> timeout: ", msg);
				});
				jessibuca.on("loadingTimeout", function(msg) {
					// console.log("Jessibuca -> timeout: ", msg);
				});
				jessibuca.on("delayTimeout", function(msg) {
					// console.log("Jessibuca -> timeout: ", msg);
				});
				jessibuca.on("playToRenderTimes", function(msg) {
					// console.log("Jessibuca -> playToRenderTimes: ", msg);
				});
				jessibuca.on("volume", function (volume) {
				    console.log('volume', volume)
				})
			},
			playBtnClick: function(event) {
				this.play(this.videoUrl)
			},
			play: function(url) {
				if (jessibucaPlayer[this._uid]) {
					this.destroy();
				}
				this.create();
				jessibucaPlayer[this._uid].on("play", () => {
					console.log('mutestatus=>',jessibucaPlayer[this._uid].isMute())
					this.playing = true;
					this.loaded = true;
					this.quieting = jessibuca.quieting;
				});
				if (jessibucaPlayer[this._uid].hasLoaded()) {
					jessibucaPlayer[this._uid].play(url);
				} else {
					jessibucaPlayer[this._uid].on("load", () => {
						jessibucaPlayer[this._uid].play(url);
					});
				}
				
				jessibucaPlayer[this._uid].on("volume", (volume) => {
					console.log('volume', volume)
				})
			},
			pause: function() {
				if (jessibucaPlayer[this._uid]) {
					jessibucaPlayer[this._uid].pause();
				}
				this.playing = false;
				this.err = "";
				this.performance = "";
			},
			screenshot: function() {

				if (jessibucaPlayer[this._uid]) {
					let base64 = jessibucaPlayer[this._uid].screenshot("test", "png", 1, 'base64');
					let date = new Date()
					// const file = this.base64ToFile(base64,date.getTime()+".png")
					const file = this.base64ToBlob(base64)
					this.$emit('screenhot',file);
					// const a = document.createElement('a');
					// a.href = URL.createObjectURL(file);
					// a.download = file.name;
					// a.click();
					// URL.revokeObjectURL(a.href);
				}
			},
			mute: function() {
				this.isNotMute = false

				if (jessibucaPlayer[this._uid]) {
					jessibucaPlayer[this._uid].mute();
				}
			},
			cancelMute: function() {
				this.isNotMute = true
				if (jessibucaPlayer[this._uid]) {
					// console.log('setvol',jessibucaPlayer[this._uid].cancelMute())
					jessibucaPlayer[this._uid].cancelMute();
					jessibucaPlayer[this._uid].setVolume(1)
					jessibucaPlayer[this._uid].audioResume()
				}
			},
			destroy: function() {
				if (jessibucaPlayer[this._uid]) {
					jessibucaPlayer[this._uid].destroy();
				}
				if (document.getElementById("buttonsBox") == null) {
					this.$refs.container.appendChild(this.btnDom)
				}
				jessibucaPlayer[this._uid] = null;
				this.playing = false;
				this.err = "";
				this.performance = "";

			},
			fullscreenSwich: function() {
				// let isFull = this.isFullscreen()
				// jessibucaPlayer[this._uid].setFullscreen(!isFull)
				// this.fullscreen = !isFull;
				this.fullscreen = !this.fullscreen
				jessibucaPlayer[this._uid].setFullscreen(this.fullscreen)
				if (this.fullscreen) {
					this.$emit('scrollTo', 44);
				} else {
					this.$emit('scrollTo', 0);
				}
			},
			isFullscreen: function() {
				return document.fullscreenElement ||
					document.msFullscreenElement ||
					document.mozFullScreenElement ||
					document.webkitFullscreenElement || false;
			},
			base64ToFile(base64, filename) {
				const arr = base64.split(',');
				const mime = arr[0].match(/:(.*?);/)[1];
				const bstr = atob(arr[1]);
				let n = bstr.length;
				const u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, {
					type: mime
				});
			},
			base64ToBlob(base64) {
			  const arr = base64.split(',');
			  const mime = arr[0].match(/:(.*?);/)[1];
			  const bstr = atob(arr[1]);
			  let n = bstr.length;
			  const u8arr = new Uint8Array(n);
			  while (n--) {
			    u8arr[n] = bstr.charCodeAt(n);
			  }
			  return new Blob([u8arr], { type: mime });
			}
		},
		destroyed() {
			if (jessibucaPlayer[this._uid]) {
				jessibucaPlayer[this._uid].destroy();
			}
			this.playing = false;
			this.loaded = false;
			this.performance = "";
		},
	}
</script>

<style>
	.buttons-box {
		width: 100%;
		height: 28px;
		background-color: rgba(43, 51, 63, 0.7);
		position: absolute;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		left: 0;
		bottom: 0;
		user-select: none;
		z-index: 10;
	}

	.jessibuca-btn {
		/* width: 20px; */
		color: rgb(255, 255, 255);
		line-height: 27px;
		margin: 0px 10px;
		padding: 0px 2px;
		cursor: pointer;
		text-align: center;
		font-size: 0.8rem !important;
	}

	.screenhot {
		position: relative;
		top: 2rpx;
	}

	.buttons-box-right {
		position: absolute;
		right: 0;
		align-items: center;
		padding-right: 30rpx;
	}

	.buttons-box-left {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
	}
</style>